<template>
  <el-dialog
    v-model="visible"
    :close-on-click-modal="false"
    :title="modalTitle"
    :width="1200"
  >
    <el-form
      ref="dataFormRef"
      :model="dataForm"
      :rules="dataRule"
      label-width="150px"
      @submit.prevent
    >
      <el-tabs
        v-model="tabValue"
      >
        <el-tab-pane
          label="企业信息"
          name="basic"
        >
          <el-row :gutter="20">
            <el-col :span="14">
              <el-form-item
                label="企业名称"
                prop="merchantName"
              >
                <el-input
                  v-if="isEdit"
                  v-model.trim="dataForm.merchantName"
                  maxlength="10"
                />
                <span v-else>{{ dataForm.merchantName || '--' }}</span>
              </el-form-item>

              <el-form-item
                label="企业简称"
                prop="merchantShortName"
              >
                <el-input
                  v-if="isEdit"
                  v-model.trim="dataForm.merchantShortName"
                  maxlength="10"
                />
                <span v-else>{{ dataForm.merchantShortName || '--' }}</span>
              </el-form-item>

              <el-form-item
                label="主营"
                prop="mainProduct"
              >
                <el-input
                  v-if="isEdit"
                  v-model.trim="dataForm.mainProduct"
                  maxlength="500"
                />
                <span v-else>{{ dataForm.mainProduct || '--' }}</span>
              </el-form-item>

              <el-form-item
                label="商家电话"
                prop="merchantName"
              >
                <el-input
                  v-if="isEdit"
                  v-model.trim="dataForm.merchantPhone"
                  maxlength="11"
                />
                <span v-else>{{ dataForm.merchantPhone || '--' }}</span>
              </el-form-item>

              <el-form-item
                label="邮箱"
                prop="merchantMail"
              >
                <el-input
                  v-if="isEdit"
                  v-model.trim="dataForm.merchantMail"
                />
                <span v-else>{{ dataForm.merchantMail || '--' }}</span>
              </el-form-item>

              <el-form-item
                label="企业官网"
                prop="merchantWebsite"
              >
                <el-input
                  v-if="isEdit"
                  v-model.trim="dataForm.merchantWebsite"
                />
                <span v-else>{{ dataForm.merchantWebsite || '--' }}</span>
              </el-form-item>

              <el-form-item
                label="企业宣传语"
                prop="merchantSlogan"
              >
                <el-input
                  v-if="isEdit"
                  v-model.trim="dataForm.merchantSlogan"
                  type="textarea"
                  :rows="4"
                />
                <span v-else>{{ dataForm.merchantSlogan || '--' }}</span>
              </el-form-item>
            </el-col>

            <el-col :span="10">
              <el-form-item
                label="企业LOGO"
                prop="merchantLogo"
              >
                <img-upload
                  v-if="isEdit"
                  v-model="dataForm.merchantLogo"
                />
                <span v-else-if="!dataForm.merchantLogo">--</span>
                <el-image
                  v-else
                  class="img-static"
                  preview-teleported
                  :src="checkFileUrl(dataForm.merchantLogo)"
                  :preview-src-list="[checkFileUrl(dataForm.merchantLogo)]"
                />
              </el-form-item>

              <el-form-item
                label="企业宣传图"
                prop="promotionalImg"
              >
                <img-upload
                  v-if="isEdit"
                  v-model="dataForm.promotionalImg"
                />
                <span v-else-if="!dataForm.promotionalImg">--</span>
                <el-image
                  v-else
                  class="img-static"
                  preview-teleported
                  :src="checkFileUrl(dataForm.promotionalImg)"
                  :preview-src-list="[checkFileUrl(dataForm.promotionalImg)]"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>

        <el-tab-pane
          label="工商信息"
          name="business"
        >
          <el-row :gutter="20">
            <el-col :span="14">
              <el-form-item
                label="统一社会信用代码"
                prop="creditCode"
              >
                <el-input
                  v-if="isEdit"
                  v-model.trim="dataForm.creditCode"
                  maxlength="20"
                />
                <span v-else>{{ dataForm.creditCode || '--' }}</span>
              </el-form-item>

              <el-form-item
                label="企业名称"
                prop="merchantName"
              >
                <el-input
                  v-if="isEdit"
                  v-model.trim="dataForm.merchantName"
                  maxlength="10"
                />
                <span v-else>{{ dataForm.merchantName || '--' }}</span>
              </el-form-item>

              <el-form-item
                label="住所"
                prop="residence"
              >
                <el-input
                  v-if="isEdit"
                  v-model.trim="dataForm.residence"
                  maxlength="50"
                />
                <span v-else>{{ dataForm.residence || '--' }}</span>
              </el-form-item>

              <el-form-item
                label="法定代表人"
                prop="representative"
              >
                <el-input
                  v-if="isEdit"
                  v-model.trim="dataForm.representative"
                  maxlength="20"
                />
                <span v-else>{{ dataForm.representative || '--' }}</span>
              </el-form-item>

              <el-form-item
                label="注册资本"
                prop="capital"
              >
                <el-input
                  v-if="isEdit"
                  v-model.trim="dataForm.capital"
                  type="number"
                >
                  <template #prefix>
                    ￥
                  </template>
                  <template #suffix>
                    万元
                  </template>
                </el-input>
                <span v-else>{{ dataForm.capital ? dataForm.capital + '万元' : '--' }}</span>
              </el-form-item>

              <el-form-item
                label="成立日期"
                prop="merchantWebsite"
              >
                <el-date-picker
                  v-if="isEdit"
                  v-model="dataForm.foundTime"
                  style="width: 100%;"
                  type="date"
                  value-format="YYYY-MM-DD"
                  clearable
                />
                <span v-else>{{ dataForm.foundTime || '--' }}</span>
              </el-form-item>

              <el-form-item
                :label="$t('shopProcess.businessTime')"
                prop="startTime"
              >
                <div
                  v-if="isEdit"
                  style="display: flex"
                >
                  <el-date-picker
                    v-model="dataForm.startTime"
                    style="width:162px;"
                    type="date"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    clearable
                    @change="onValidateTime('startTime')"
                  />
                  <span style="margin: 0 10px">-</span>
                  <span class="end-time">
                    <el-date-picker
                      ref="endTimeRef"
                      v-model="dataForm.endTime"
                      style="width:162px;"
                      type="date"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      :placeholder="(endTimeFlag && !dataForm.endTime && dataForm.startTime) ? '' : $t('shopProcess.endTime')"
                      clearable
                      :disabled="!dataForm.startTime"
                      @change="onValidateTime('endTime')"
                      @focus="endTimeFlag = false"
                      @blur="endTimeFlag = true"
                    />
                    <span
                      v-if="endTimeFlag && !dataForm.endTime && dataForm.startTime"
                      class="text"
                      @click="focusEndTime"
                    >
                      {{ $t('shopProcess.noFixedTerm') }}
                    </span>
                  </span>
                </div>
                <span v-else>{{ (dataForm.startTime || '--') + ' ~ ' + (dataForm.endTime || '--') }}</span>
              </el-form-item>

              <el-form-item
                label="经营范围"
                prop="businessScope"
              >
                <el-input
                  v-if="isEdit"
                  v-model.trim="dataForm.businessScope"
                  type="textarea"
                  :rows="4"
                />
                <span v-else>{{ dataForm.businessScope || '--' }}</span>
              </el-form-item>
            </el-col>

            <el-col :span="10">
              <el-form-item
                label="营业执照电子版"
                prop="businessLicense"
              >
                <img-upload
                  v-if="isEdit"
                  v-model="dataForm.businessLicense"
                />
                <span v-else-if="!dataForm.businessLicense">--</span>
                <el-image
                  v-else
                  class="img-static"
                  preview-teleported
                  :src="checkFileUrl(dataForm.businessLicense)"
                  :preview-src-list="[checkFileUrl(dataForm.businessLicense)]"
                />
                <div
                  v-if="isEdit"
                  class="example-box"
                >
                  <img
                    src="@/assets/img/example-img/Business-license.png"
                    alt
                  >
                  <div class="tips">
                    {{ $t('shopProcess.example') }}
                  </div>
                </div>
              </el-form-item>

              <el-form-item
                label="法人身份证(正面)"
                prop="identityCardFront"
              >
                <img-upload
                  v-if="isEdit"
                  v-model="dataForm.identityCardFront"
                />
                <span v-else-if="!dataForm.identityCardFront">--</span>
                <el-image
                  v-else
                  class="img-static"
                  preview-teleported
                  :src="checkFileUrl(dataForm.identityCardFront)"
                  :preview-src-list="[checkFileUrl(dataForm.identityCardFront)]"
                />
                <div
                  v-if="isEdit"
                  class="example-box"
                >
                  <img
                    src="@/assets/img/example-img/idcard1.png"
                    alt
                  >
                  <div class="tips">
                    {{ $t('shopProcess.example') }}
                  </div>
                </div>
              </el-form-item>

              <el-form-item
                label="法人身份证(反面)"
                prop="identityCardLater"
              >
                <img-upload
                  v-if="isEdit"
                  v-model="dataForm.identityCardLater"
                />
                <span v-else-if="!dataForm.identityCardLater">--</span>
                <el-image
                  v-else
                  class="img-static"
                  preview-teleported
                  :src="checkFileUrl(dataForm.identityCardLater)"
                  :preview-src-list="[checkFileUrl(dataForm.identityCardLater)]"
                />
                <div
                  v-if="isEdit"
                  class="example-box"
                >
                  <img
                    src="@/assets/img/example-img/idcard2.png"
                    alt
                  >
                  <div class="tips">
                    {{ $t('shopProcess.example') }}
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-form>

    <template
      v-if="isEdit"
      #footer
    >
      <div>
        <div
          class="default-btn"
          @click="visible = false"
        >
          {{ $t("coupon.cancel") }}
        </div>
        <div
          class="default-btn primary-btn"
          @click="onSubmitApprove()"
        >
          {{ $t("coupon.confirm") }}
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import { isAuth } from '@/utils/index.js'
import { isTel } from '@/utils/validate'

const tabValue = ref('basic')

const modalTitle = ref('查看')
const isEdit = ref(false)
const visible = ref(false)
const dataForm = ref({})
const dataFormRef = ref(null)
const init = (id, isedit) => {
  visible.value = true
  tabValue.value = 'basic'
  modalTitle.value = isedit ? '编辑' : '查看'
  isEdit.value = !!isedit
  http({
    url: http.adornUrl(`/shop/merchantAudit/getShopCompany/${id}`),
    method: 'get'
  }).then((res) => {
    visible.value = true
    dataForm.value = res.data
  })
}

const validateTel = (rule, value, callback) => {
  if (value) {
    if (isTel(value)) {
      callback()
    } else {
      callback(new Error('请输入正确的电话'))
    }
  } else {
    callback()
  }
}

const isEmail = (s) => {
  return /^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)
}

const validateEmail = (rule, value, callback) => {
  if (!value) callback()
  if (!isEmail(value)) {
    callback(new Error('请输入正确的邮箱'))
  } else {
    callback()
  }
}

const validateMobile = (rule, value, callback) => {
  if (!value) callback()
  if (value) {
    const mobile = /^(?:(?:\+|00)86)?1\d{2}([\d*]{4})\d{4}$/
    if (mobile.test(value)) {
      callback()
    } else {
      callback(new Error('请输入正确的联系方式'))
    }
  }
}

const vaildCreditCode = (rule, value, callback) => {
  const reg = /^(([0-9A-Za-z]{15})|([0-9A-Za-z]{18})|([0-9A-Za-z]{20}))$/
  if (!reg.test(value)) {
    callback(new Error('请输入正确的统一社会信用代码'))
  } else {
    callback()
  }
}

const dataRule = ref({
  merchantName: [
    { required: true, message: '企业名称不能为空', trigger: 'blur' }
  ],
  userMobile: [
    { required: true, message: '联系人电话不能为空', trigger: 'blur' },
    { validator: validateMobile, trigger: 'blur' }
  ],
  merchantPhone: [
    { validator: validateTel, trigger: 'blur' }
  ],
  merchantMail: [
    { validator: validateEmail, trigger: 'blur' }
  ],
  creditCode: [
    { required: true, message: '信用代码不能为空', trigger: 'blur' },
    { validator: vaildCreditCode, trigger: 'blur' }
  ],
  firmName: [
    { required: true, message: '企业名称不能为空', trigger: 'blur' }
  ],
  representative: [
    { required: true, message: '法定代表人不能为空', trigger: 'blur' }
  ],
  businessLicense: [
    { required: true, message: '营业执照不能为空', trigger: 'blur' }
  ],
  identityCardFront: [
    { required: true, message: '法人身份证不能为空', trigger: 'blur' }
  ],
  identityCardLater: [
    { required: true, message: '法人身份证不能为空', trigger: 'blur' }
  ]
})

const endTimeFlag = ref(true)
const onValidateTime = (value) => {
  if (value === 'endTime') {
    endTimeFlag.value = true
    if (!dataForm.value.startTime) dataForm.value.endTime = undefined
  } else {
    endTimeFlag.value = false
    if (!dataForm.value.startTime) dataForm.value.endTime = undefined
  }
  if (dataForm.value.endTime && Date.parse(dataForm.value.startTime) >= Date.parse(dataForm.value.endTime)) {
    ElMessage({
      message: $t('shopProcess.businessTimeTips'),
      type: 'error',
      duration: 1500
    })
    endTimeFlag.value = true
    dataForm.value.endTime = undefined
  }
}

const onSubmitApprove = () => {
  dataFormRef.value?.validate((valid) => {
    if (valid) {
      http({
        url: http.adornUrl('/shop/merchantAudit'),
        method: 'put',
        data: http.adornData({
          ...dataForm.value,
          auditStatus: '1'
        })
      }).then(() => {
        visible.value = false
        ElMessage.success('操作成功')
      })
    }
  })
}

defineExpose({
  init
})
</script>

<style lang="scss" scoped>
.img-static {
  display: block;
  width: 120px;
  height: 120px;
  margin-right: 15px;
  border-radius: 5px;
}

.end-time {
  position: relative;
  .text {
    position: absolute;
    left: 30px;
    line-height: 32px;
    font-size: 14px;
  }
}

// 示例框
.example-box {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 130px;
  height: 130px;
  background: #FFFFFF;
  border: 1px solid #EAEAEA;
  border-radius: 3px;
  box-sizing: border-box;
  margin-left: 30px;

  img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
  }

  .tips {
    position: absolute;
    left: -1px;
    bottom: 0;
    width: 130px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    color: #fff;
    background: rgba(51, 51, 51, 0.5);
    text-align: center;
    border-radius: 0 0 3px 3px;
  }
}

:deep(.el-upload) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px !important;
  height: 121px !important;
  background: #FFFFFF;
  border: 1px solid #EAEAEA;
  border-radius: 3px;
  box-sizing: border-box;

  .el-icon-plus {
    font-size: 22px;
    color: #EAEAEA;
  }
}

:deep(.el-upload--picture-card),
:deep(.el-upload-list--picture-card .el-upload-list__item) {
  width: 120px !important;
  height: 120px !important;
  line-height: 120px;
  margin: 0;
}

span{
  word-break: break-all;
}
</style>
